{% extends "zato/index.html" %}

{% block html_title %}Clusters{% endblock %}

{% block "extra_css" %}
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.alerts.css">
    <style type="text/css">
        .ui-dialog-titlebar {
            padding-bottom:10px !important;
        }
    </style>
{% endblock %}

{% block "extra_js" %}

    {% comment %} jQuery {% endcomment %}
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.tablesorter.min.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.cookie.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.alerts.min.js"></script>

    {% comment %} Common JS {% endcomment %}
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/common.js"></script>

    {% comment %} HTTP Basic Auth {% endcomment %}
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/cluster.js"></script>


    <script nonce="{{ CSP_NONCE }}">
    $.fn.zato.data_table.get_columns = function() {
        return [
            '_numbering',
            '_selection',
            '_cluster',
            '_addresses',
            '_edit',
            '_delete',
            '_manage_lb',
            '_servers',

            'id',
            'name',
            'description',

            'lb_host',
            'lb_port',
            'lb_agent_port',
        ]
    }
    </script>

{% endblock %}

{% block "content" %}
<h2 class="zato">Clusters</h2>


    <div id="user-message-div" style='display:none'><pre id="user-message" class="user-message"></pre></div>

    <div id="markup">
        <table id="data-table">
            <thead>

                <tr>
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                    <th>Cluster</th>
                    <th>Addresses</th>
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>

                    <th class='ignore'>&nbsp;</th>
                    <th class='ignore'>&nbsp;</th>
                    <th class='ignore'>&nbsp;</th>

                    <th class='ignore'>&nbsp;</th>
                    <th class='ignore'>&nbsp;</th>
                    <th class='ignore'>&nbsp;</th>
                </tr>
            </thead>

            <tbody>

            {% if items %}
            {% for item in items %}

                {% if is_windows %}

                <tr class="{% cycle 'odd' 'even' %}" id='tr_{{ item.id }}'>

                {% else %}

                <tr
                    class="{% if not item.lb_config or item.some_down or item.some_maint or item.all_down %}attention{% else %} {% cycle 'odd' 'even' %}{% endif %}"
                        id='tr_{{ item.id }}'>

                {% endif %}

                    <td class='numbering' style="width:3%">&nbsp;</td>
                    <td class="impexp"><input type="checkbox" /></td>
                    <td style="width:30%">{{ item.name }}

                    {% if item.description %}
                        <br/>
                        <pre>{{ item.description }}</pre>
                    {% endif %}

                    {% if not item.lb_config %}
                        {% if not is_windows %}
                            <br/> Could not fetch the load balancer's configuration
                        {% endif %}
                    {% endif %}


                    {% if item.lb_config %}
                        {% include "zato/cluster/servers_state.html" %}
                    {% endif %}

                    </td>
                    <td style="width:30%">

                    {% if is_windows %}
                        Dashboard: <a href="http://127.0.0.1:8183">http://127.0.0.1:8183</a>
                        <br/>
                        REST Ping: <a href="http://127.0.0.1:17010/zato/ping">http://localhost:17010/zato/ping</a>
                    {% else %}
                        {% if item.lb_config %}
                            {% include "zato/cluster/addresses.html" %}
                        {% endif %}
                    {% endif %}

                    </td>
                    <td>
                        {% if not is_windows %}
                            <a href="javascript:$.fn.zato.cluster.edit('{{ item.id }}')">Edit</a>
                        {% endif %}
                    </td>
                    <td>
                        {% if not is_windows %}
                            <a href="javascript:$.fn.zato.cluster.delete_('{{ item.id }}')">Delete</a>
                        {% endif %}
                    </td>
                    <td>
                        {% if not is_windows %}
                            {% if item.lb_config %}
                                <a href="{% url "lb-manage" item.id %}">Load-balancer</a>
                            {% endif %}
                        {% endif %}
                    </td>
                    <td>
                        {% if not is_windows %}
                            {% if item.lb_config %}
                                <a href="{% url "cluster-servers" %}?cluster={{ item.id }}">Servers</a>
                            {% endif %}
                        {% endif %}
                    </td>

                    <td class='ignore item_id_{{ item.id }}'>{{ item.id }}</td>
                    <td class='ignore'>{{ item.name }}</td>
                    <td class='ignore'>{{ item.description|default_if_none:'' }}</td>
                    <td class='ignore'>{{ item.lb_host }}</td>
                    <td class='ignore'>{{ item.lb_port }}</td>
                    <td class='ignore'>{{ item.lb_agent_port }}</td>
                </tr>
            {% endfor %}
            {% else %}
                <tr class='ignore'>
                    <td colspan='23'>No results</td>
                </tr>
            {% endif %}

            </tbody>
        </table>
    </div>

    <div id="edit-div" class='data-popup ignore'>
        <div class="bd">
            <form novalidate action="{% url "cluster-edit" %}" method="post" id="edit-form">
                <table class="form-data">
                    <tr>
                        <td style="vertical-align:middle;width:15%">Name</td>
                        <td colspan="5">{{ edit_form.name }}</td>
                    </tr>
                    <tr>
                        <td style="vertical-align:middle">Description</td>
                        <td colspan="5">{{ edit_form.description }}</td>
                    </tr>
                    <tr>
                        <td style="vertical-align:middle">LB host</td>
                        <td>{{ edit_form.lb_host }}</td>
                        <td style="vertical-align:middle">LB port</td>
                        <td>{{ edit_form.lb_port }}</td>
                        <td style="vertical-align:middle">LB agent port</td>
                        <td>{{ edit_form.lb_agent_port }}</td>
                    </tr>
                    <tr>
                        <td colspan="6" style="text-align:right">
                            <input type="submit" value="OK" />
                            <button type='button' onclick='javascript:$.fn.zato.data_table.close(this)'>Cancel</button>
                        </td>
                    </tr>
                </table>
                <input type="hidden" id="id_edit-id" name="id" />
            </form>
        </div>
    </div>

{% endblock %}
